<template>
  <v-chart ref="chart" class="chart" :option="option" />
</template>

<script>
export default {
  name: 'PieChart5',
  props: ['rData', 'showDemo'],
  created() {
    if (this.showDemo) {
      this.option.legend.show = true
    }
  },
  data() {
    return {
      option: {
        color: ['#007AFF', '#5ac7a9', '#85C89D', '#f7c241', '#e06d67', '#85C89D', '#fc8452', '#9a60b4', '#ea7ccc'],
        legend: {
          bottom: 'bottom',
          show: false
        },
        title: {
          text: '中国工程院 \n\xa0学部分布',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: [30, 50],
            center: ['center', 'center'],
            label: {
              formatter: (params) => {
                return Math.round(params.percent) + '%' + '\n' + params.name
              }
            },
            labelLine: {
              length: 5
            },
            data: [
              { value: 40, name: 'A院士' },
              { value: 38, name: 'B院士' },
              { value: 32, name: 'C院士' },
              { value: 30, name: 'D院士' },
              { value: 28, name: 'E院士' },
              { value: 40, name: 'F院士' },
              { value: 38, name: 'G院士' },
              { value: 32, name: 'H院士' },
              { value: 30, name: 'I院士' },
              { value: 28, name: 'J院士' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    resize() {
      this.$refs['chart'].resize()
    }
  }
}
</script>

<style>

</style>
